<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Demo</title>
		<link rel="stylesheet" href="/nlweb-dropdown-chat.css" />
		<link rel="stylesheet" href="/common-chat-styles.css" />
		<style>
			body {
				font-family:
					-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
				line-height: 1.6;
				color: #333;
				max-width: 1200px;
				margin: 0 auto;
				padding: 20px;
				background-color: #f5f5f5;
			}

			.header {
				background: white;
				padding: 30px;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				margin-bottom: 30px;
			}

			.header h1 {
				margin: 0 0 10px 0;
				color: #2c3e50;
			}

			.header p {
				margin: 0;
				color: #666;
			}

			.section {
				background: white;
				padding: 30px;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.section h2 {
				margin-top: 0;
				color: #2c3e50;
			}

			/* Custom styling for the search container */
			#docs-search-container {
				margin-bottom: 30px;
			}

			#product-search-container {
				max-width: 500px;
				margin: 20px 0;
			}
		</style>
	</head>

	<body>
		<div id="docs-search-container"></div>

		<script type="module">
			// replace this with absolute path or document that
			import { NLWebDropdownChat } from "/nlweb-dropdown-chat.js";

			const chat = new NLWebDropdownChat({
				containerId: "docs-search-container",
				site: window.location.origin,
				placeholder: "Search for docs...",
				// endpoint to use for fetching data
				endpoint: window.location.origin,
			});
		</script>
	</body>
</html>
